<template>
	<div id="index">
		<dv-full-screen-container class="bg">
			<dv-loading v-if="loading">Loading...</dv-loading>
			<div v-else class="host-body">
				<div class="d-flex jc-center">
					<dv-decoration-10 style="width:33.3%;height:.05rem;" />
					<div class="d-flex jc-center">
						<dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.5rem;" />
						<div class="title">
							<span class="title-text">大数据可视化平台</span>
							<dv-decoration-6 class="title-bototm" :reverse="true" :color="['#50e3c2', '#67a1e5']" style="width:3.125rem;height:.1rem;" />
						</div>
						<dv-decoration-8 :reverse="true" :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
					</div>
					<dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
				</div>

				<div class="body-box1">
					<!-- 第三行数据 -->
					<div class="bototm-box1">
						<dv-border-box-12>
							<indexcard clickRouter="/construction-screen" imgsrc="pj01" title="施工养护综合数据大屏"></indexcard>
						</dv-border-box-12>
						<dv-border-box-12>
							<indexcard clickRouter="/epidemic-screen" imgsrc="pj02" title="大数据可视化大屏"></indexcard>
						</dv-border-box-12>
						<dv-border-box-12>
							<indexcard clickRouter="/equipment-screen" imgsrc="pj03" title="设备管理数据大屏"></indexcard>
						</dv-border-box-12>
						<dv-border-box-12>
							<indexcard clickRouter="/tollStation-screen" imgsrc="pj04" title="收费站数据大屏"></indexcard>
						</dv-border-box-12>

					</div>
				</div>
			</div>
		</dv-full-screen-container>
	</div>
</template>

<script>
	import indexcard from "@/views/index-card.vue";
	/* eslint-disable */
	export default {
		data() {
			return {
				loading: true
			};
		},
		components: {
			indexcard
		},
		// 加载完成后执行的事件
		mounted() {
			this.cancelLoading();
		},
		methods: {
			cancelLoading() {
				setTimeout(() => {
					this.loading = false;
				}, 2000);
			},
			jump: function(routerPath) {
				this.$router.replace(routerPath);
			}
		}
	};
</script>

<style lang="scss">
	@import "../assets/scss/index.scss";
</style>
